<!--
 * @Author: GKN
 * @Date: 2023-07-24 14:08:42
 * @LastEditTime: 2024-01-09 10:00:54
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\components\card2.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="card cursor-p">
        <div class="img po-re" >
            <imgView :src='props.url' />
            <videoIcon v-if="props.type=='video'" />
        </div>
        <div class="main">
            <div class="title">{{ props.title }}</div>
            <div class="desc">{{ props.desc }}</div>
        </div>
    </div>
  </template>
  
  <script setup>
  import videoIcon from '../components/icon/video.vue';
  const props = defineProps({
        type: {
            type: String,
            default: "img",
        },
        url: {
            type: String,
            default: "",
        },
        title:{
            type: String,
            default: "",
        },
        desc:{
            type: String,
            default: "",
        }
    })
  </script>
  
  <style lang='less' scoped>
  /deep/ .d-player-state{
    position: absolute;
    top: 50%;
  }
  /deep/ .d-player-state .d-play-btn{
    width: 50px;
    height: 50px;
  }
  /deep/ .d-player-state .d-play-btn .d-icon {
    font-size: 12px;
  }
  
      .card{
        width: 100%;
        border-radius: 6px;
        overflow: hidden;
        .img{
            width: 100%;
            height: 150px;
            background: #ececec;
        }
        .main{
            padding:15px 20px;
            box-sizing: border-box;
            background: #fff;
            .title{
                font-size: 14px;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: left;
                font-weight: bold;
            }
            .desc{
                font-size: 14px;
                color:#8d8d8d;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top:10px;
                text-align: left;
            }
        }
      }
  </style>
  